<template>
  <div class="tab">
    <div class="title">涨停期</div>
    <el-table
      class="table"
      :data="tableData"
      stripe
      :header-cell-style="{ background: '#d7d7d7' }"
      :cell-style="{ background: '#d7d7d7' }"
      row-key="index"
      @row-click="(row) => openClick(row)"
      @sort-change="sortChange"
    >
      <el-table-column prop="code" label="代码/名称">
        <template #default="{ row }">
          <span>{{ `${row.code}/${row.name_y}` }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="last_price" label="现价" sortable />
      <el-table-column prop="change_rate" label="涨幅" sortable>
        <template #default="{ row }">
          <span>{{ takeDecimal(row.change_rate) + "%" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="change_value" label="涨跌" sortable>
        <template #default="{ row }">
          <span>{{ takeDecimal(row.change_value) + "%" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-space wrap @click.stop="">
            <el-button
              size="small"
              type="primary"
              v-if="!scope.row?.gold_flag"
              @click="handleClick(scope, 'add', 'gold')"
              >加入金池</el-button
            >
            <el-button
              size="small"
              v-if="scope.row?.gold_flag"
              @click="handleClick(scope, 'del', 'gold')"
              >取消</el-button
            >
            <el-button
              size="small"
              type="primary"
              v-if="!scope.row?.warn_flag"
              @click="handleClick(scope, 'add', 'warn')"
              >加入预警</el-button
            >
            <el-button
              size="small"
              v-if="scope.row?.warn_flag"
              @click="handleClick(scope, 'del', 'warn')"
              >取消</el-button
            >
          </el-space>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script setup>
import { takeDecimal, changeMoney } from "@/utils/base.js";
import { computed, reactive, onMounted, defineEmits, ref } from "vue";
import { defaultApi } from "@/servers";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const store = useStore();
const router = useRouter();
const tableData = ref([]);
const market = computed(() => store.getters.system.market);
// 搜索推荐
onMounted(() => {
  stocks();
});
// 搜索
function stocks() {
  defaultApi
    .stocks({
      market: market.value,
      type: "warn",
    })
    .then((data) => {
      // 展示表
      tableData.value = data || [];
    });
}
// 查看
function openClick(row) {
  store.commit("system/SET", { key: "code", value: row.code });
  router.push("/RiskWarning");
}
// 关注
function handleClick(scope, opt, type) {
  const { row } = scope;
  // 关注
  defaultApi
    .opt({
      market: market.value,
      code: row.code,
      opt,
      type,
    })
    .then((data) => {
      ElMessage({
        message: "操作成功",
        type: "success",
      });
      plateStocks();
    });
}
</script>

<style lang="scss" scoped>
.tab {
  width: 100%;
  background: #d7d7d7;
  border-radius: 2px;
  color: #000;
  .title {
    padding: 10px 0;
    text-align: center;
    border-bottom: 2px solid #999;
    font-size: 16px;
    font-weight: bold;
  }
  .table {
    flex: 1;
    color: #000;
    height: 300px;
    background: transparent !important;
    overflow: auto;
    ::v-deep .el-table__empty-block {
      background: transparent;
    }
  }
}
</style>